<template>
  <div class="add-user-page">
    <el-dialog :title="pageType == 'add' ? '新增人员':'编辑人员信息'" :visible.sync="dialogVisible">
      <div class="rule-box">
        <div class="basic-news">
            <div class="user-img">
              <img :src="ruleForm.imgUrl" alt="">
            </div>
            <div class="user-list">
              <div class="item-line">
                <span>AD账号：</span>
                <el-input 
                  size="mini"
                  v-if="pageType == 'add'"
                  placeholder="请输入用户AD"
                  v-model="ruleForm.ad"></el-input>
                <span v-else>{{ruleForm.ad}}</span>
              </div>
              <div class="item-line">
                <span>用户姓名：</span>
                <el-input
                  size="mini" 
                  v-if="pageType == 'add'" 
                  placeholder="请输入用户姓名"
                  v-model="ruleForm.userNm"></el-input>
                <span v-else>{{ruleForm.userNm}}</span>
              </div>
              <div class="item-line">
                <span>手机号：</span>
                <el-input 
                  size="mini"
                  placeholder="请输入用户手机号"
                  v-model="ruleForm.mobile"></el-input>
              </div>
              <div class="item-line">
                <span>邮箱：</span>
                <el-input 
                  size="mini"
                  placeholder="请输入用户邮箱"
                  v-model="ruleForm.email"></el-input>
              </div>
              <div v-if="pageType == 'add'" class="item-line">
                <span>头像URl：</span>
                <el-input 
                  size="mini" 
                  placeholder="请输入用户头像URL"
                  v-model="ruleForm.imgUrl"></el-input>
              </div>
            </div>
        </div>
        <el-form
          size="mini"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          label-position="left"
          class="demo-ruleForm"
        >
          <div class="left-cell">
            <el-form-item label="一级部门：" prop="topDept">
              <el-input placeholder="请输入一级部门" v-model="ruleForm.topDept"></el-input>
            </el-form-item>
            <el-form-item label="部门类型：" prop="isBusinessDept">
              <el-select v-model="ruleForm.isBusinessDept" placeholder="请选择部门">
                <el-option
                  v-for="(item,index) in deptNmList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位：" prop="position">
              <el-input placeholder="请输入岗位" v-model="ruleForm.position"></el-input>
            </el-form-item>
            <el-form-item label="纵向序列：" prop="posSequence">
              <el-input placeholder="请输入纵向序列" v-model="ruleForm.posSequence"></el-input>
            </el-form-item>
            <el-form-item label="兼职部门：" prop="ptTopDept">
              <el-input placeholder="请输入兼职部门" v-model="ruleForm.ptTopDept"></el-input>
            </el-form-item>
            <el-form-item label="关闭访客：" prop="visitClose">
                <el-switch
                    v-model="ruleForm.visitClose"
                    active-color="#13ce66"
                    inactive-color="#c2bdbd"
                    active-text="是"
                    inactive-text="否"
                    active-value="1"
                    inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="关闭考勤：" prop="checkinClose">
                <el-switch
                    v-model="ruleForm.checkinClose"
                    active-color="#13ce66"
                    inactive-color="#c2bdbd"
                    active-text="是"
                    inactive-text="否"
                    active-value="1"
                    inactive-value="0">
                </el-switch>
            </el-form-item>
          </div>
          <!-- 右侧 -->
          <div class="right-cell">
            <el-form-item label="部门全称：" prop="deptNm">
              <el-input placeholder="请输入部门全称" v-model="ruleForm.deptNm"></el-input>
            </el-form-item>
            <el-form-item label="岗位类别：" prop="posCategory">
              <el-select v-model="ruleForm.posCategory" placeholder="请选择岗位类别">
                <el-option label="无" value=""></el-option>
                <el-option label="客户经理" value="PM"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="岗位层级：" prop="posLevel">
              <el-select v-model="ruleForm.posLevel" placeholder="请选择岗位层级">
                <el-option
                  v-for="(item,index) in levelList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="管理层级：" prop="manageLevel">
                <el-input placeholder="请输入管理层级" v-model="ruleForm.manageLevel"></el-input>
                <!-- <el-select v-model="ruleForm.manageLevel" placeholder="请选择岗位级别">
                  <el-option
                    v-for="(item,index) in manageLevelList"
                    :key="index"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select> -->
            </el-form-item>
            <el-form-item label="兼职岗位层级：" prop="ptPosLevel">
              <el-select v-model="ruleForm.ptPosLevel" placeholder="请选择岗位层级">
                <el-option
                  v-for="(item,index) in levelList"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="所属群：" prop="group">
              <el-input placeholder="请输入所属群" v-model="ruleForm.group"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Vue from "vue";
import { Form , FormItem } from "element-ui";
import { alertMessage } from "@/config/myUtil";
import { createauthPerson, employeeauthPersonget } from "@/api/getData";
Vue.use(Form);
Vue.use(FormItem);
export default {
  name: "AddEditUser",
  data() {
    let validate = (name)=>{
      return { 
        required: true,
        validator: (rule, value, callback)=>{
          if (!value || this.$Trim(String(value)) === '') {
            callback(new Error(name));
          }else {
            callback();
          }
        }, 
        trigger: 'blur',
      }
    }
    return {
      dialogVisible: false,
      pageType:"add",
      levelList: [
        { name: "六级-普通员工", value: 6 },
        { name: "五级-基层管理者", value: 5 },
        { name: "四级-部门副职", value: 4 },
        { name: "三级-部门负责人", value: 3 },
        { name: "二级-公司领导", value: 2 },
        { name: "一级-总经理", value: 1 }
      ],
      deptNmList: [
        { name: "职能部门", value: "0" },
        { name: "业务部门", value: "1" },
        { name: "平台公司", value: "2" },
        { name: "巡视组", value: "3" }
      ],
      manageLevelList:[
        { name: "无", value: "" },
        { name: "M1", value: "M1" },
        { name: "M2", value: "M2" },
        { name: "M3", value: "M3" },
        { name: "M4", value: "M4" },
        { name: "M5", value: "M5" },
      ],
      ruleForm: {
        ad: "",
        userNm: "",
        deptNm: "",
        topDept: "",
        position: "",
        manageLevel: "",
        posCategory: "",
        isBusinessDept:"",
        posLevel: "",
        email: "",
        mobile: "",
        status: "0",
        checkinClose:'1',
        visitClose:'1'
      },
      rules: {
        deptNm: [
          validate('请输入所属部门')
        ],
        topDept: [
          validate('请输入所属一级部门')
        ],
        position: [
          validate('请输入岗位')
        ],
        posLevel: [
          validate('请选择岗位层级')
        ],
        isBusinessDept: [
          validate('请选择部门类型')
        ]
      }
    };
  },
  methods: {
    async getemployeeauthPerson(){
        try {
            let data = await employeeauthPersonget({
                ad:this.ruleForm.ad
            });
            if(data && data.ad){
              if(this.pageType == 'set'){
                this.ruleForm = data;
              }else{
                this.$confirm('此AD账号已经存在是否覆盖?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   this.createauthPersonApi();
                }).catch(() => {});
              };
            }else{
              this.createauthPersonApi();
            }
        } catch (error) {
            console.log(error)
        }
    },
    async createauthPersonApi() {
      try {
        if(this.ruleForm.ad && this.ruleForm.userNm){
          let data = await createauthPerson(this.ruleForm);
          if (data == 1) {
            this.dialogVisible = false;
            this.$refs["ruleForm"].resetFields();
            this.$emit('initThisData');
          }else{
            this.dialogVisible = false;
            alertMessage('修改失败','error');
          }
        }else{
          alertMessage("请输入AD和姓名","warning")
        };
      } catch (error) {
        console.log(error);
      }
    },
    changestaus(value) {
      this.dialogVisible = true;
      if(value){
        this.pageType = "set";
        this.ruleForm.ad = value;
        this.getemployeeauthPerson();        
      }else{
        this.pageType = 'add';
        this.$nextTick(()=>{
          this.$refs["ruleForm"].resetFields();
          this.ruleForm.ad = "";
          this.ruleForm.userNm = "";
          this.ruleForm.mobile = "";
          this.ruleForm.email = "";
          this.ruleForm.imgUrl = "";
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.pageType == 'add'){
            this.getemployeeauthPerson();
          }else{
            this.createauthPersonApi();
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less">
@import url('../less/adduser.less');
</style>